<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <ul>
        <li onclick="handleClickItem(0)"></li>
        <li onclick="handleClickItem(1)"></li>
        <li onclick="handleClickItem(2)"></li>
        <li onclick="handleClickItem(3)"></li>
      </ul>
      <div class="left-btn" onclick="handleClickLeft"></div>
      <div class="right-btn" onclick="handleClickRight"></div>
      <div class="tools">
        <ul>
          <li onclick="handleClickTool(0)"></li>
          <li onclick="handleClickTool(1)"></li>
          <li onclick="handleClickTool(2)"></li>
          <li onclick="handleClickTool(3)"></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    function handleClickItem(i) {}
    function handleClickLeft() {}
    function handleClickRight() {}
    function handleClickTool(i) {}
  </script>
</html>
